<template>
  <div class="searchNav">
    <van-nav-bar title left-arrow @click-left="toback">
      <template #title>
        <van-search
          show-action
          v-model="computedInputVal"
          placeholder="搜索本公司信息"
          background="transparent"
          shape="round"
          @clear="onCancelInputText"
          @search="onSearch"
        >
          <template #action>
            <!--  必须要阻止事件冒泡          -->
            <div @click.stop="onSearch">搜索</div>
          </template>
        </van-search>
      </template>
    </van-nav-bar>
    <div class="search-history">
      <!-- 历史记录 -->
      <div class="search-history-wrap" v-if="isShow">
        <div class="history-title">
          <div class="history-title-left">搜索历史</div>
          <div class="history-title-right">
            <img src="../assets/img/lajitong.png" @click="clear" />
          </div>
        </div>
        <div class="history-content">
          <span class="history-label" v-for="item in historyList" @click="toInput(item)">
            {{ item }}
          </span>
        </div>
      </div>
    </div>
    <!-- 提示 -->
    <div v-if="this.$route.meta.isSearch">
      <van-empty
        image="https://img01.yzcdn.cn/vant/empty-image-search.png"
        :description="historyList.length > 0 ? '' : '暂无搜索历史'"
        name="search"
      />
    </div>
  </div>
</template>

<script>
import {Toast} from 'vant'
import {mapState} from 'vuex'
export default {
  props: ['currentVal'],
  data() {
    return {
      search_value: '',
      id: this.$route.params.id,
      isShow: this.$route.meta.isSearch
    }
  },
  mounted() {
    // console.log(this.$route.meta.isSearch);
  },
  methods: {
    toback() {
      this.$router.back()
    },
    //输入框事件
    onSearch() {
      let V = this.computedInputVal,
        list = this.historyList,
        req = /^\s*\s$/
      if (V && this.computedInputVal != null && V != undefined && V != ' ' && !req.test(V)) {
        if (!list.includes(V.trim())) {
          // 向vuex添加记录
          this.$store.dispatch('getHistory', this.computedInputVal.trim())
        }
        //用params传值，做axios
        //跳转搜索内容页面
        if (this.$route.meta.isSearch) {
          this.$router.push({
            path: `/searchDetail/${this.id}`,
            query: {
              // eslint-disable-next-line no-undef
              search_value: this.computedInputVal
            }
            // params:{id:this.id}
          })

          // eslint-disable-next-line no-empty
        } else {
          this.$emit('search', this.computedInputVal)
        }
      }
    },

    onCancelInputText() {
      Toast('已清空')
      // this.search_value = e
      this.$emit('onClearInputVal')
    },
    //点击历史纪录
    toInput(e) {
      this.search_value = e
    },

    //清除历史记录
    clear() {
      this.$store.dispatch('clearHistory')
    }
  },
  computed: {
    ...mapState({
      historyList: state => state.search.historyList
    }),

    computedInputVal: {
      // getter
      get: function() {
        return this.currentVal || this.search_value
      },
      // setter
      set: function(newValue) {
        console.log('新的值44', newValue)
        this.search_value = newValue || ''
        this.$emit('changeVal', newValue)
      }
    }
  }
}
</script>

<style lang="scss" scroped>
.searchNav {
  .van-nav-bar {
    &::after {
      border: none;
    }
    .van-nav-bar__title {
      display: flex;
      flex: 1;
      justify-content: flex-end;
      max-width: none;
      padding: 0 5px;

      .van-search {
        width: 90%;
        .van-search__action {
          z-index: 3;
          background: linear-gradient(45deg, rgba(73, 155, 234, 1) 0%, rgba(26, 188, 156, 1) 100%);
          color: white;
          padding: 0 0.3rem;
          border-radius: 15px;
          line-height: 0.8rem;
          opacity: 0.9;
        }
        .van-search__content--round {
          animation: animate 1s;
        }
      }
    }
  }
}
@keyframes animate {
  from {
  }
  to {
  }
}
</style>
